<template>
	<div>
		<div>
			<span class=''>
				<el-select size='mini' clearable placeholder='在线状态' v-model='filter.online'>
					<el-option
						v-for='(item, key) in connectStatusList'
						:key='key'
						:label='item'
						:value='key'>
					</el-option>
				</el-select>
				<el-select size='mini' clearable  v-model='filter.gateway' filterable class='m-l-10' placeholder='所属网关'>
					<el-option
					v-for='item in gatewayList'
					:key='item.gateway'
					:label='item.name'
					:value='item.gateway'>
					</el-option>
				</el-select>
				<el-select size='mini' clearable class='m-l-10' placeholder='分配状态' v-model='filter.allot'>
					<el-option
					v-for='(item, key) in allotStatusList'
					:key='key'
					:label='item'
					:value='key'>
					</el-option>
				</el-select>
			</span>
			<span class='m-l-20'>
				<el-input size='mini' placeholder='请输入内容' v-model='filter.device' style='width:350px'>
					<el-select size='mini' v-model='filter.searchType' slot='prepend' style='width:100px' placeholder='请选择'>
						<el-option label='设备号' :value='1'></el-option>
						<el-option label='设备名称' :value='2'></el-option>
						<el-option label='sim iccid' :value='3'></el-option>
					</el-select>
					<el-button size='mini' slot='append' @click='search' icon='el-icon-search'></el-button>
				</el-input>
			</span>
			<span class='m-l-20'>
				<router-link to='/device/add'><el-button size='mini' type='primary'>新增</el-button></router-link>
			</span>
		</div>
		<div class='m-t-15 f-12'  v-if='checkPermission("admin", "agent")'>
			<span class='color-primary'>批量操作</span>
			<span class='m-l-20'>
				<el-button @click='openSetChargePrice' type='primary' size='mini' :plain='true' round v-if='checkPermission("admin", "agent")'>设置充电价格</el-button>
				<el-button @click='sendDeviceParams' type='primary' size='mini' :plain='true' round v-if='checkPermission("admin", "agent")'>下发运行参数</el-button>
				<el-button @click='openAllotAgent' type='primary' size='mini' :plain='true' round v-if='checkPermission("admin")'>分配代理</el-button>
				<el-button @click='openAllotStore' type='primary' size='mini' :plain='true' round v-if='checkPermission("agent")'>分配门店</el-button>
				<el-button @click='openUnbindDevice' type='primary' size='mini' :plain='true' round v-if='checkPermission("admin", "agent")'>解绑设备</el-button>
			</span>
		</div>
		<div class='content-box m-t-30'>
			<el-table class='f-12' :data='deviceList' style='width:100%;' @selection-change='handleSelectionChange'>
				<el-table-column type='selection' width='55'></el-table-column>
				<el-table-column label='设备号'>
				  <template slot-scope='scope'>{{ scope.row.device_no }}</template>
				</el-table-column>
				<el-table-column label='设备名称'>
					<template slot-scope='scope'>{{ scope.row.device_name }}</template>
				</el-table-column>
				<el-table-column label='设备锁状态'>
					<template slot-scope='scope'>
						<el-switch
							v-model='scope.row.lock_status'
							@change='toggleDeviceLock($event, scope.row)'
						  active-color='#F56C6C'
						  inactive-color='#13ce66'>
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column label='在线状态'>
					<template slot-scope='scope'>
						<span :class='{"color-67c23a" : scope.row.online == 1, "color-f56c6c" : scope.row.online == 0 }'>{{connectStatusList[scope.row.online]}}</span>
					</template>
				</el-table-column>
				<el-table-column label='信号强度'>
					<template slot-scope='scope'>
						<signal :signal='scope.row.signal'></signal>
					</template>
				</el-table-column>
				<el-table-column label='地址'>
					<template slot-scope='scope'>
						<template v-if='checkPermission("admin")'>{{(scope.row.province || '') + (scope.row.city || '') + (scope.row.district || '')}}</template>
						{{ scope.row.address }}
					</template>
				</el-table-column>
				<el-table-column label='所属代理商' v-if='checkPermission("admin")'>
					<template slot-scope='scope'>{{ scope.row.agent_name || '' }}</template>
				</el-table-column>
				<el-table-column label='所属门店' v-if='checkPermission("admin", "agent")'>
					<template slot-scope='scope'>{{ scope.row.store_name || '' }}</template>
				</el-table-column>
				<el-table-column label='所属网关' v-if='checkPermission("admin")'>
					<template slot-scope='scope'>
						{{scope.row.gateway }}
					</template>
				</el-table-column>
				<el-table-column label='充电价格'>
					<template slot-scope='scope'>
						<el-popover
							v-if='scope.row.charge_price'
							trigger='hover'>
							<div style="line-height:24px;font-size:12px;padding:5px 0px">
								<div>扫码预设选择:</div>
								<div style='overflow:hidden;width:130px;'>
									<div v-if='scope.row.charge_price.options' v-for='item in scope.row.charge_price.options' style='float:left;padding:0px 5px;'>{{item.a}}元{{item.q}}{{ scope.row.charge_type == 1 ? '小时' : '度' }}</div>
								</div>
								<div>预付费：{{scope.row.charge_price.prepayment}}元</div>
								<div style='overflow:hidden;width:130px;'>
									<div v-if='scope.row.charge_price.class_rate' v-for="item in scope.row.charge_price.class_rate" style='float:left;padding:0px 5px;'>{{item.q}}{{scope.row.charge_price.charge_type == 1 ? '分钟' : '元/度'}}/{{item.w}}瓦</div>
								</div>
							</div>
							<router-link v-if='scope.row.charge_price.owner' slot='reference' class='color-primary' :to='"/price/edit/" + scope.row.price_id'>{{scope.row.charge_price.price_name }}</router-link>
							<span class='color-primary'  slot='reference' v-else>{{scope.row.charge_price.price_name }}</span>
						</el-popover>
						
					</template>
				</el-table-column>
				<el-table-column label='扫码收入(元)'>
					<template slot-scope='scope'>
						{{scope.row.online_amount}}
					</template>
				</el-table-column>
				<el-table-column label='线上卡(元)'>
					<template slot-scope='scope'>
						{{scope.row.online_card_amount}}
					</template>
				</el-table-column>
				<el-table-column fixed='right' label='操作' width='150'>
					<template slot-scope='scope'>
						<router-link class='m-l-5' :to='"/device/edit/" + scope.row.device_id'><el-button size='mini' type='text'>编辑</el-button></router-link>
						<router-link class='m-l-5' :to='"/device/detail/" + scope.row.device_id'><el-button size='mini' type='text'>详情</el-button></router-link>
						<el-button v-if='checkPermission("admin")' class='m-l-5' size='mini' type='text' @click='deleteDevice(scope.row.device_id)'>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class='m-t-30'>
				<pagination ref='pagination' :query='pageQuery' v-on:page='pageList' url='device/deviceList'></pagination>
			</div>
		</div>

		<!-- 分配代理的弹窗 -->
		<el-dialog title='分配代理' :visible.sync='showAllotAgentDiaLog' width='750px'>
		  <div class='text-center'>
			  <div style='font-size:20px;'>请选择您要分配的代理商</div>
				  <div class=''>
					  <el-select style='width:460px' class='m-t-30' placeholder='请选择' v-model='allotParams.agentId'>
						<el-option
						v-for='item in allotAgentList'
						:key='item.agent_id'
						:label='item.agent_name'
						:value='item.agent_id'>
						</el-option>
					  </el-select>
				  </div>
			  </div>
			  <div slot='footer' class='text-center'>
				<el-button style='width:460px;margin:auto;' :disabled='allotParams.agentId == ""' type='primary' @click='allotAgent()'>确 定</el-button>
			  </div>
		</el-dialog>
		
		<!-- 分配门店的弹窗 -->
		<el-dialog title='分配门店' :visible.sync='showAllotStoreDiaLog' width='750px'>
			<div class='text-center'>
				<div style='font-size:20px;'>请选择您要分配的门店</div>
					<div class=''>
						<el-select style='width:460px' class='m-t-30' placeholder='请选择' v-model='allotParams.storeId'>
						<el-option
						v-for='item in allotStoreList'
						:key='item.store_id'
						:label='item.store_name'
						:value='item.store_id'>
						</el-option>
						</el-select>
					</div>
				</div>
				<div slot='footer' class='text-center'>
				<el-button style='width:460px;margin:auto;' :disabled='allotParams.storeId == ""' type='primary' @click='allotStore()'>确 定</el-button>
				</div>
		</el-dialog>
		
		<!-- 设置价格的弹窗 -->
		<el-dialog title='设置充电价格套餐' :visible.sync='showSetChargePriceDiaLog' width='750px'>
			<div class='text-center'>
				<div style='font-size:20px;'>请选择价格套餐</div>
				<div class=''>
					<el-select style='width:460px' filterable class='m-t-30' placeholder='请选择' v-model='allotParams.priceId'>
						<el-option
						v-for='item in chargePriceList'
						:key='item.price_id'
						:label='item.price_name'
						:value='item.price_id'>
						</el-option>
					</el-select>
				</div>
			</div>
			<div slot='footer' class='text-center'>
				<el-button style='width:460px;margin:auto;' :disabled='allotParams.priceId == ""' type='primary' @click='setChargePrice()'>确 定</el-button>
			</div>
		</el-dialog>

		<!-- 解绑设备确认框 -->
		<el-dialog title='解绑设备' :visible.sync='showConfirmUnbindDeviceDiaLog' width='750px'>
			<div class='text-center' style='font-size:25px'>确定解绑选中的设备吗</div>
			<div slot='footer' class='text-center'>
				<el-button style='width:460px;margin:auto;' type='primary' @click='unbindDevice()'>确 定</el-button>
			</div>
		</el-dialog>
		
	</div>
</template>

<script src='./index.js'></script>

<style lang='less' scoped>
	#toggle-list-btn{
		width:200px;
		border:1px solid #ebeef5;
		border-radius:5px;
		display:flex;
		.item{
			font-size:12px;
			flex:1;
			line-height:30px;
			text-align:center;
			&.selected{
				color:#FFFFFF;
				background:linear-gradient(to right, rgb(110,156,254), rgb(110,195,254))
			}
		}
	}
</style>
